import { View, Image, Button, Text } from '@tarojs/components'
import { BasePage } from '@common/components/base-page'
import Jump from '@utils/jump'
import AppRoute from '@utils/route/index'
import exImg from '../../assets/img/watch.png'
import rec from '../../assets/img/rec.png'
import hot from '../../assets/img/hot.png'
import choose from '../../assets/img/choose.png'
import refuse from '../../assets/img/refuse.png'
import ks from '../../assets/img/ks.png'
import dy from '../../assets/img/dy.png'
import sph from '../../assets/img/sph.png'
import xhs from '../../assets/img/xhs.png'
import wb from '../../assets/img/wb.png'
import bli from '../../assets/img/bli.png'
import style from './index.module..scss'


interface IProps {
    progress?: Boolean
    taskList?: any
}
interface IState {
    imgList: any
    btnStatus: number
}

export default class List extends BasePage<IProps, IState> {
    constructor(props) {
        super(props);
        this.state = {
            btnStatus: 1,
            imgList: [ks, dy, wb, bli, xhs, sph],
        }
    }
    imgChange(img) {
        switch (img) {
            // 'status refuse'
            case 'refuse':
                return <View className={style.status && style.refuse}></View>
            case 'wait':
                return <View className={style.status && style.wait}></View>
            case 'end':
                return <View className={style.status && style.end}></View>
            case 'process':
                return <View className={style.status && style.process}></View>
            default:
                return null
        }
    }

    handleBtn = (item) => {
        if (item.enable_claim_limit === false || item.claim_limit === 0) {
            return `${item.claim_count}人已报名`;
        } else if (item.enable_claim_limit === true && item.claim_limit > 0) {
            if (item.claim_limit > item.claim_count) {
                return `剩余${item.claim_limit - item.claim_count}人`;
            } else if (item.claim_limit === item.claim_count) {
                return `已达上限`;
            }
        }
        return '';
    };

    render() {
        const { progress } = this.props
        if (this.props.taskList.length === 0) {
            return (
                <View style="text-align:center" className={style.mainList}>
                    <Text className={style.noData}>暂无数据</Text></View>
            )
        }

        return (
            <>
                {
                    progress && <View className={style.mainList}
                        onClick={() => {
                            Jump.jump({
                                url: AppRoute.MODULES.TASKINFO,
                                query: {
                                    name: 'task'
                                }
                            })
                        }}>
                        <View className={style.leftText}>
                            <View className={style.imgCon}>
                                <Image src={exImg}></Image>
                                <Image className={style.label} src={rec}></Image>
                            </View>
                            <View className={style.rightText}>
                                <Text className={style.title}>100U新品体验官招募</Text>
                                <Text className={style.second}>最高得10w创作值和加热扶持</Text>
                                <View>
                                    <View className={style.iconsText}>
                                        {
                                            this.state.imgList && this.state.imgList.map((item, index) => {
                                                return (
                                                    <Image className={style.icons} src={item}></Image>
                                                )

                                            })
                                        }
                                        <View className={style.imgs}>
                                            {this.imgChange('refuse')}
                                        </View>
                                    </View>
                                </View>
                                <Text className={style.time}>2024.03.05-2024.05.31</Text>
                            </View>
                        </View>
                    </View>
                }
                {
                    this.props?.taskList?.map(item => {
                        return (
                            <View className={style.mainList}>
                                <View className={style.leftText}>
                                    <View className={style.imgCon}>
                                        <Image src={item.thumbnail}></Image>
                                        <Image className={style.label} src={rec}></Image>
                                    </View>
                                    <View className={style.rightText}>
                                        <Text className={style.title}>{item.title}</Text>
                                        <Text className={style.second}>{item.description}</Text>
                                        <View>
                                            <View className={style.iconsText}>
                                                {
                                                    item?.task_platforms && item?.task_platforms?.map((item, index) => {
                                                        return (
                                                            <Image className={style.icons} src={item.platform.image}></Image>
                                                        )
                                                    })
                                                }
                                                <Text className={style.person}>{this.handleBtn(item)}</Text>
                                            </View>
                                        </View>
                                        <Text className={style.time}>{item.start_at}-{item.end_at}</Text>
                                    </View>
                                </View>

                                {
                                    item.claim_limit=== item.claim_count&&item.claim_limit!==0&&item.enable_claim_limit ?
                                        <View className={style.overBtn}>
                                            <Button >已报满</Button>
                                        </View> : <View className={style.btn}>
                                            <Button onClick={() => {
                                                Jump.jump({
                                                    url: AppRoute.MODULES.TASKINFO, query: {
                                                        name: 'task'
                                                    }
                                                })
                                            }} >去领取</Button>
                                        </View>
                                }
                            </View>
                        )
                    })

                }
            </>
        )
    }
}
